<section class="todoapp">
    <header class="header">
        <h1>Tasks</h1>
       
        <select class="new-todo" id="topicsList"  placeholder="Project"  title="Category" (change)="changeTodos($event.target.value)">
            <option *ngFor="#todo of todoStore.topics | orderBy : 'SortOrder'" value="{{todo.Id}}">{{todo.Title}}</option>
        </select>

        <input class="new-todo" placeholder="What to do?" autofocus="" [(ngModel)]="newTodoText" (keyup.enter)="addTodo()">

    </header>
    <section class="main" *ngIf="todoStore.todos.length > 0">
        <input class="toggle-all" type="checkbox" *ngIf="todoStore.todos.length" #toggleall [checked]="todoStore.allCompleted()" (click)="todoStore.setAllTo(toggleall.checked)">
       
         <ul class="todo-list">
            <li *ngFor="#todo of todoStore.todos" [class.completed]="todo.Completed" [class.editing]="todo.Editing">
                <div class="view">
                    <input type="hidden" value="{{todo.Id}}">
                    <input class="toggle" type="checkbox" (click)="toggleCompletion(todo)" [checked]="todo.Completed">
                    <label (dblclick)="editTodo(todo)">{{todo.Title}}</label>
                    <button class="destroy" (click)="remove(todo)"></button>
                </div>
                <input class="edit" *ngIf="todo.Editing" [value]="todo.Title" #editedtodo (blur)="stopEditing(todo, editedtodo.value)" (keyup.enter)="updateEditingTodo(todo, editedtodo.value)" (keyup.escape)="cancelEditingTodo(todo)">
            </li>
        </ul>

    </section>
    <footer class="footer" >
        <span class="todo-count"><strong>{{todoStore.getRemaining().length}}</strong> {{todoStore.getRemaining().length == 1 ? 'task' : 'tasks'}} remaining</span>
        <button class="clear-completed" (click)="todoStore.get(true)">Completed</button>
        <button class="clear-completed" (click)="todoStore.get(false)">In Progress</button>
        <button class="clear-completed" *ngIf="todoStore.getCompleted().length > 0" (click)="removeCompleted()">Clear Completed</button>
    </footer>
</section>

